<template>
	<div class="find_order">
		<div>
			<h4>后台订单管理</h4>
			<el-form :inline="true" :model="hot" class="demo-form-inline">
				<el-form-item>
					<el-select v-model="hot.payStatus" placeholder="付款状态">
						<el-option label="已付款" value="yes"></el-option>
						<el-option label="未付款" value="no"></el-option>
					</el-select>
					<el-form-item>
						<el-input v-model="hot.phone" placeholder="下单人手机号"></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item>
					<el-select v-model="hot.shipStatus" placeholder="发货">
						<el-option label="未发货" value="off"></el-option>
						<el-option label="已发货" value="out"></el-option>
					</el-select>
					<el-form-item>
						<el-input v-model="hot.account" placeholder="下单人账号"></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item>
					<el-select v-model="hot.days" placeholder="时间">
						<el-option label="7天内" value="7"></el-option>
						<el-option label="14天内" value="14"></el-option>
						<el-option label="30天内" value="30"></el-option>
						<el-option label="60天内" value="60"></el-option>
						<el-option label="120天内" value=""></el-option>
					</el-select>
					<el-form-item>
						<el-input v-model="hot.nickname" placeholder="下单人姓名"></el-input>
					</el-form-item>
				</el-form-item>
				<el-form-item>
					<div>
						<el-button type="primary" icon="el-icon-search" @click="findOrdInfo()"> 查询 </el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="ss" :row-class-name="tableRowClassName">
			<el-table-column type="expand">
				<template slot-scope="props">
					<div style="display: flex;">
						<div style="display: flex; align-items: center;">
						</div>
						<table style="margin-left: 10%; margin-right: 10%; width: 60%;">
							<tr>
								<td>&nbsp;</td>
								<td><b>账号:&nbsp;</b>{{props.row.user.account}}</td>
								<td><b>电话:&nbsp;</b>{{props.row.user.phone}}</td>
								<td><b>下单:</b>{{props.row.user.nickname}}</td>
								<td>&nbsp;&nbsp;&nbsp;</td>
								<td>
									<span v-show="props.row.shipStatus>=1">
										<b>{{props.row.shipper}}</b>
									</span>
								</td>
							</tr>
							<tr v-for="x in props.row.items">
								<td>
									<div style="width: 3vw; height:3vw;">
										<img :src="`http://127.0.0.1/api/public/showimg/${x.book.pic}`"
											style="display: block; width: 100%; height: 100%;" />
									</div>
								</td>
								<td><b>名称:&nbsp;</b>{{x.book.name}}</td>
								<td><b>数量:&nbsp;</b>{{x.num}}</td>
								<td><b>单价:&nbsp;</b>&yen;{{x.price}}</td>
								<td><b>库存:&nbsp;</b>{{x.book.stock}}</td>
							</tr>
						</table>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="ordid" label="订单号" width="180">
			</el-table-column>
			<el-table-column prop="ship2name" label="收货人">
			</el-table-column>
			<el-table-column prop="ship2addr" label="收货地址">
			</el-table-column>
			<el-table-column prop="ship2phone" label="电话">
			</el-table-column>
			<el-table-column prop="shipno" label="发货单号">
			</el-table-column>
			<el-table-column prop="tcreate" label="下单时间">
			</el-table-column>
			<el-table-column prop="amount" label="总价">
			</el-table-column>
			<el-table-column prop="payStatus" label="付款状态">
			</el-table-column>
			<el-table-column prop="shipStatus" label="收货状态">
			</el-table-column>
		</el-table>
		<div style="display: flex; justify-content: center;">
			<el-button type="primary" @click="showMore()" size="small" style="width: 200px;"> 显示更多</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'findOrder',
		data() {
			return {
				tableData: [],
				items: [],
				hot: {
					days: 7,
					payStatus: '',
					shipStatus: '',
					account: '',
					nickname: '',
					phone: ''
				},
				page: {
					pageNum: 1,
					lines: 6,
					total: 0
				},
			}
		},
		methods: {
			findOrdInfo() {
				this.tableData = [];
				this.page.pageNum = 1;
				this.page.total = 0;
				this.$postKv("/api/adm/ord/findPageOrders2u/" + this.page.pageNum + "/" + this.page.lines, this.hot)
					.then(resp => {
						console.log(resp.data)
						if (resp.data.code != 200) {
							this.$message.error(resp.data.msg);
							return;
						}
						this.tableData = resp.data.data.orders;
						this.page.total = resp.data.data.total;
						console.log(this.tableData)
					})
			},
			showMore() {
				if (this.page.pageNum * this.page.lines > this.page.total) {
					this.$message.error("没有更多了记录了");
					return;
				}
				this.page.pageNum++;
				this.$postKv("/api/adm/ord/findPageOrders2u/" + this.page.pageNum + "/" + this.page.lines, this.hot)
					.then(resp => {
						let lines = resp.data.data.orders;
						this.tableData.push(...lines);
						this.page.total = resp.data.data.total;
						console.log(this.tableData)
					})
			},
			handleChange(val) {
				console.log(val);
			},
			onSubmit() {
				console.log('submit!');
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			chang(type) {
				this.page.pageNum = type;
				console.log(this.page.pageNum);
				this.show();
			},
		},
		computed: {
			ss() {
				for (let i = 0; i < this.tableData.length; i++) {
					if (this.tableData[i].shipStatus == 0) {
						this.tableData[i].shipStatus = "未发货"
					}
					if (this.tableData[i].shipStatus == 1) {
						this.tableData[i].shipStatus = "发货"
					}
					if (this.tableData[i].shipStatus == 2) {
						this.tableData[i].shipStatus = "已收货"
					}
				}
				for (let i = 0; i < this.tableData.length; i++) {
					if (this.tableData[i].payStatus == 0) {
						this.tableData[i].payStatus = "未付款"
					}
					if (this.tableData[i].payStatus == 1) {
						this.tableData[i].payStatus = "已付款"
					}
				}
				return this.tableData;
			},
		},
		mounted() {
			console.log("查询订单");
			console.log(this.hot);
			this.$postKv("/api/adm/ord/findPageOrders2u/" + this.page.pageNum + "/" + this.page.lines, this.hot).then((
				resp) => {
				this.tableData = resp.data.data.orders
				this.total = resp.data.data.total;
				console.log(resp.data.data);
				console.log(this.tableData);
			})
		}
	}
</script>

<style scoped>
	.find_order {
		width: 100%;
	}
</style>